<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-22 16:50:19
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-22 17:50:00
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="我的订单"
      :request="getList"
      :columns="columns"
      :search="searchObj"
    >
      <template #expand="data">
        <el-table style="width: 100%" border :data="[data.row]">
          <el-table-column prop="productId" label="产品编号"></el-table-column>
          <el-table-column
            prop="contactsName"
            label="联系人名称"
          ></el-table-column>
          <el-table-column
            prop="contactsNumber"
            label="联系人手机号码"
          ></el-table-column>
          <el-table-column prop="validCount" label="数量"></el-table-column>
          <el-table-column
            prop="remainCount"
            label="剩余数量"
          ></el-table-column>
          <el-table-column prop="expireDate" label="过期时间">
            <template #default="{ row }">
              {{ row.expireDate | parseTime }}
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #date="{ row }">
        {{ row.orderDate | parseTime }}
      </template>
      <template #operate="{ row }">
        <el-tooltip key="1" content="使用详情" placement="top">
          <i class="el-icon-tickets operate-button disabled"></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="该订单不符合退款要求" placement="top">
          <svg-icon
            icon-class="tuikuan"
            class="operate-button disabled"
          ></svg-icon>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="重新购买" placement="top">
          <svg-icon
            icon-class="shopping"
            class="operate-button"
            @click="$router.push(`/account/shopping/product/${row.productId}`)"
          />
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="继续支付" placement="top">
          <svg-icon icon-class="zhifu" class="operate-button" />
        </el-tooltip>
      </template>
    </pro-table>
  </div>
</template>
<script>
export default {
  name: 'MyOrder',

  data() {
    return {
      columns: [
        { type: 'expand', tdSlot: 'expand' },

        {
          label: '订单编号',
          prop: 'id',
          width: 200,
        },
        {
          label: '产品名称',
          prop: 'productName',
        },
        {
          label: '产品类型',
          prop: 'productType',
        },
        {
          label: '有效期',
          prop: 'availableDays',
        },
        {
          label: '支付金额',
          prop: 'amount',
        },
        {
          label: '订单状态',
          prop: 'status',
        },
        {
          label: '支付方式',
          prop: 'paymentType',
        },
        {
          label: '下单时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 160,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '',
            name: 'id',
            placeholder: '订单编号',
          },
          {
            type: 'text',
            label: '',
            name: 'productName',
            placeholder: '产品名称',
          },
          {
            type: 'select',
            label: '',
            name: 'productType',
            placeholder: '产品类型',
            options: [
              {
                value: 'MESSAGE',
                name: '5G消息',
              },
              {
                value: 'FEATURE',
                name: '产品功能',
              },
              {
                value: 'CAPABILITY',
                name: '能力调用',
              },
            ],
          },
          {
            type: 'select',
            label: '',
            name: 'status',
            placeholder: '订单状态',
            options: [
              {
                value: 'FINISH',
                name: '已完成',
              },
              {
                value: 'TO_PAY',
                name: '待付款',
              },
              {
                value: 'TO_CONFIG',
                name: '待配置',
              },
              {
                value: 'TO_DEBUG',
                name: '待联调',
              },
              {
                value: 'INUSING',
                name: '使用中',
              },
              {
                value: 'TO_REFUNDED',
                name: '退款中',
              },
              {
                value: 'REFUNDED',
                name: '已退款',
              },
              {
                value: 'CLOSED',
                name: '已关闭',
              },
            ],
          },
          {
            type: 'daterange',
            label: '',
            name: 'orderDate',
            trueNames: ['startTime', 'endTime'],
            placeholder: '下单时间',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  amount: 0.05,
                  applicationId: '0',
                  availableDays: 180,
                  comments: 'timeout',
                  contactsName: '李',
                  contactsNumber: '16777778888',
                  enterpriseId: '141598637888113837',
                  enterpriseName: '北京修治科技有限公司',
                  expireDate: '2022-09-18T03:46:01.000+00:00',
                  id: '2022032211460000000001',
                  orderDate: '2022-03-22T03:46:01.000+00:00',
                  paymentType: 'ALIPAY',
                  productCode: '0',
                  productId: '7002664',
                  productName: '文本消息',
                  productSubType: 'TEXT',
                  productType: 'MESSAGE',
                  refundNo: null,
                  refundedReason: 'timeout',
                  remainCount: '1',
                  status: 'CLOSED',
                  tradeNo: null,
                  validCount: '1',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.disabled {
  color: #999;
}
</style>
